<template>
	<u-popup mode="center" width="590" v-model="show" :border-radius="24" :closeable="closeable" :mask-close-able="false" @close="close">
		<view class="popup-title">{{title}}</view>
		<view class="confirm-tips-popup">
			<slot>
				<view class="text-c font-s-16 line-height-48">{{content}}</view>
			</slot>
			<view class="flex-between-center mar-t-20">
				<view class="flex-1" v-if="showCancelButton">
					<u-button @click="close" shape="circle" :custom-style="{width:'250rpx',height:'76rpx',fontSize: '28rpx',fontWeight: 'bold',background: '#F5F7FA',color:'#1F1F1F'}" :ripple="true" type="primary">{{closeText}}</u-button>
				</view>
				<view class="flex-1">
					<u-button @click="confirm" shape="circle" :custom-style="{width:'250rpx',height:'76rpx',fontSize: '28rpx',background: '#297EFF',fontWeight: 'bold'}" :ripple="true" type="primary">{{confirmText}}</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:'ConfirmTipsPopup',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '温馨提醒'
			},
			content: {
				type: String,
				default: ''
			},
			closeText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			},
			asyncClose:{
				type: Boolean,
				default: false
			},
			closeable:{
				type: Boolean,
				default: true
			},
			showCancelButton:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				show:false
			}
		},
		watch:{
			visible(){
				this.show = this.visible
			}
		},
		methods: {
			close(){
				this.$emit('update:visible', false)
				this.$emit('close')
			},
			confirm(){
				if(!this.asyncClose){
					this.$emit('update:visible', false)
				}
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-tips-popup{
		padding: 24rpx;
	}
</style>
